import { Component, OnInit, ViewChild } from '@angular/core';
import { ColumnType, SPage, TablePageComponent } from '@shared/components/table-page/table-page.component';
import { Body, _HttpClient } from '@delon/theme';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { ApiService } from '@core/services/api';
import { STData } from '@delon/abc';
import { ACLService } from '@delon/acl';
declare var QRCode
import  html2canvas  from 'html2canvas'

@Component({
  selector: 'app-easy-device-list',
  templateUrl: './easy-device-list.component.html',
  styles: []
})
export class EasyDeviceListComponent implements OnInit {
  @ViewChild('st', { static: false }) st: TablePageComponent;
  selectData: any;
  loading = false;
  addUserInfo = {
    userAccount: '',
    userPassword: '',
    userName: '',
    roles: [],
    depts: []
  };
  config: SPage = {
    columns: [
      {
        index:"",
        title:"选择",
        type:ColumnType.checkbox
      },
      {
        index: 'deviceCode',
        title: '设备SN码',
        width:150,
        filter: {
          placeholder: '请输入设备SN码',
          type: 'string'
        }
      },
      {
        index: 'deviceDescribe',
        title: '设备描述',
        width:100,
        filter: {
          placeholder: '请输入设备描述',
          type: 'string'
        }
      },
      {
        index: 'simId',
        title: 'sim卡号',
        width:200,
        type:ColumnType.tag,
        filter: {
          index:'printStatus',
          placeholder: '请选择打印状态',
          type: 'select',
          items: [
            {label: '打印', value: 0},
            {label: '已打印', value: 1},
          ]
        }
      },
      {
        index:'deviceCategory',
        title:'设备类型',
        width:100,
        type: ColumnType.tag,
        tag: {
          1:{text: '大门口机'},
          2:{text: '管理机'},
          3:{text: '单元机'},
          4:{text:'室内机'}
        },
      },
      {
        index: 'deviceType',
        title: '设备分类',
        width:100,
        type: ColumnType.tag,
        tag:{
          1:{text: '门禁摄像机'},
          2:{text: '门禁刷卡'},
          3:{text: 'IPC'},
          4:{text: 'NVR'},
          5:{text: '微型门禁产品'},
          6:{text: '安卓门禁产品'},
          7:{text: '门铃'},
          8:{text: '4G开门控制器'}
          
        }
      },
      {
        index: 'deviceLocation',
        title: '安装地址',
        width:450,
        filter: {
          placeholder: '请输入安装地址',
          type: 'string'
        },
        //className:'w200'
      },
      {
        index: 'deviceLocationStatus',
        title: '绑定状态',
        width:100,
        type: ColumnType.tag,
        tag: {
          0:{text: '未绑定',color: 'red'},
          1:{text: '已绑定',color: 'green'}
        },
        filter: {
          placeholder: '请选择绑定状态',
          type: 'select',
          items: [
            {label: '未绑定', value: 0},
            {label: '已绑定', value: 1},
          ]
        }
      },
      {
        index: 'deviceLastStatus',
        title: '设备状态',
        width:100,
        type: ColumnType.tag,
        tag:{
          0:{text: '离线',color: 'red'},
          1:{text: '在线',color: 'green'}
        },
        filter: {
          placeholder: '请选择设备状态',
          type: 'select',
          items: [
            {label: '离线', value: 0},
            {label: '在线', value: 1},
          ]
        }
      },
      {
        index: 'deviceIp',
        title: '门禁IP',
        width:120,
        filter:{
          placeholder:'请输入设备IP地址',
          type:'string'
        }
      },
      {
        index: 'status',
        title: '状态',
        width:80,
        type: ColumnType.tag,
        tag:{
          true:{text:'启用',color:'green'},
          false:{text:'停用',color:'red'}
        }
      },
      {
        index: '',
        title: '操作',
        width:180,
        fixed:'right',
        buttons:[
          {
            text:'打印',
            iif: (data: STData) => {
                return data.printStatus == 0;
            },
            click:(_record)=>{
              this.watchQRCode(_record.deviceCode,_record.id)
            }
          },
          {
            text:'已打印',
            iif: (data: STData) => {
                return data.printStatus == 1;
            },
          }
        ]
      },
    ],
    showCheckBox: false,
    reqUrl:'/core/host/page',
    defaultParam:{status:true,deviceType:8}
    // editBtn: [
    //   { title: '详情' },
    //   // {title: '禁用'},
    //   // {title: '责任人'},
    //   {title: '绑定',
    //   iif: (data: STData) => {
    //     return data.deviceLocationStatus == 0
    //   } }
    // ]
  }
  constructor(private http: _HttpClient,  private api: ApiService, private modal: NzModalService, private message: NzMessageService,private aclService: ACLService) { }
 
  //查看二维码
  watchQRCode(deviceCode,id):void{
    const self = this
    const modal = this.modal.create({
      nzTitle: '二维码',
      nzContent: '<div class="imgDiv"><div class="qrcode" id="imgDiv"></div></div>',
      nzWidth: 400,
      nzFooter: [
        {
          label:"已打印",
          type:"primary",
          onClick:()=>{
            const body={}
            self.http.post('/core/host/setPrintStatus',{"id":id}).subscribe(res => {
              if(res.status === '200'){
                modal.close()
                self.st.reload();
              }else{
                self.message.error(res.message)
              }
            })
          }
        }
      ],
    })
    modal.afterOpen.subscribe(()=>{
      new QRCode(document.getElementsByClassName("qrcode")[0],{
        width:350,
        height:350
      }).makeCode(deviceCode);
    })
  }
  ngOnInit() {

  }

}
